@import "reset.less";
@import "fnList.less";
@import "varList.less";

html,
body {
    background-color: white;
}

@{header} {
    .width();
    .flex();
    .flex-justify();
    .flexible(12, font-size);
    .flex-align();
    height: 0.44rem;
    .padding-space(0, 12);
    background-color: #1448AE;

    a {

        .block();


        &:first-of-type {
            .inline-block();
    
            .flexible(0, font-size);
            .fn-px-rem(width, 50);
            .fn-px-rem(height, 50);
            background: url(../images/icon/sprites.png) no-repeat -0.44rem -0.12rem;
            .backgroundSize(3.75rem, 4.57rem);

        }

        &:nth-child(2) {
            letter-spacing: 2px;
            .flexible(16, font-size);
            margin-left: 0.2rem;
            .color(rgb(253, 253, 253));
        }
        &:nth-child(3){
            .flexible(12, font-size);
            .color(rgb(253, 253, 253));
        }
    }
}

@{section} {
    font-size: 0.12rem;
    .width();
    max-width: 3.5rem;
    .margin(10);
    height       : 1.35rem;
    background   : rgba(244, 244, 244, 1);   

    .order-form {
        .padding-space(16, 12);
        .group {
            font-size: 0.12rem;
            .flex();
            justify-content: space-between;

            .group-left {
                display   : inline-block;
                width     : 0.19rem;
                height    : 0.19rem;
        
                .background("order0424.png");
                background-size: 100% 100%;
                margin-top: 0.04rem;

            }

            .miss {
              
                width         : 80%;
                // letter-spacing: 0.02rem;
                text-indent   : 10px;
                .color(#000);

                p {
                    .margin-space(2, 0);

                    &:nth-child(1) {
                        font-weight: bold;
                        color: #333333;
                        font-size  : 0.17rem
                    }
                    &:nth-child(2){
                        font-size:  0.15rem;
                        color:#666666;
                    }
                }
            }

            .kui {
                span {
                    .margin-space(3, 0);
                    display: block;
                    text-align: center;
                    &:nth-child(1){
                        color:#F88412;
                        font-size:0.15rem;
                    }
                    &:nth-child(2){
                        font-size: 0.15rem;
                        color: #666666;
                    }
                }
            }

        }

        .nav-btn{
            .flex();
            flex-direction: row-reverse;
            align-items: flex-end;
             height: 0.70rem;
         
            div{
                margin: 0.10rem 0.04rem;
                border-radius: 0.04rem;
                width: 0.73rem;
                height: 0.3rem;
                border: 1px  #BBBBBB solid;
                text-align: center;
                line-height: 0.3rem;
                a{
                    font-size:
                    0.15rem;
                    color: #1AB2DB;
                }
                &:hover {
                    background-color:#1AB2DB;
                    
                }
                &:hover a{
                    color: white;
                }
            }
            div:nth-of-type(1){
                border:none;
                background:#1AB2DB;
                a{
                    color:#fff;
                }
            }
       }
            
    }
    .menu{

        margin-top:3.03rem;
        height: 1.05rem;
        p{     text-align: center;
            font-size: 0.15rem;
               margin-bottom: 0.13rem;
            &:nth-child(1){
              color:
                #999999;
                
            }
            &:nth-child(2){
                margin: 0 auto;
                text-align: center;
                width: 1.35rem;
                height: 0.25rem;
                line-height: 0.25rem;
                border: 1px solid silver;
               
            }
            a{
                color:black;
            }
            
        }
        span{
            position: fixed;
            bottom: 0.5rem;
            right: 0.11rem;
            display: inline-block;
            width: 0.3rem;
            height: 0.3rem;
            
            background: url(../images/icon/sprites.png)no-repeat -1.12rem -3.04rem;
            background-size: 3.75rem, 4.57rem;
         
        }
    }
}

footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 0.5rem;
    align-items: center;
    line-height: 0.5rem;
    display: flex;
    .flex-justify();
    .padding-space(0, 20);
    background-color: #999999;
    box-sizing: border-box;
    .order-end{
        display:flex;
        align-items:center;
        font-size: 0.12rem;
          span{
            font-size: 0.15rem;
            color: white;
          }
        i{
            vertical-align: middle;
            width: 0.21rem;
            height: 0.22rem;

            display: inline-block;
            background: url(../images/icon/DDDx.png)no-repeat;
            background-size: 100% 100%;
            margin-right:0.08rem;
        }
        &:nth-child(2) i{
            width: 0.18rem;
            height: 0.27rem;
            background: url(../images/icon/mmmx.png)no-repeat;
            background-size: 100% 100%;
        }
      
        &:nth-child(3) i{
            width: 0.2rem;
            height: 0.2rem;
            background: url(../images/icon/pp.png)no-repeat;
            background-size: 100% 100%;
            margin-left:0.08rem;
        }
    
    }
}